<style scoped>
img.banner-img{
    width:100%;
}

p.title{
    margin:5px 10px;
    font-size:18px;
    color:#5D656B;
}

p.info{
    margin:5px 10px;
    font-size:14px;
}

p.info span.price{
    font-size:20px;
    color:#EB5221;
    display: inline-block;
    width:50%;
    vertical-align: middle;
}

p.info span.cart{
    width:50%;
    display: inline-block;
    text-align: right;
}

p.info a.cart{
    width: 100px;
    height:30px;
    line-height:30px;
    border-radius: 15px;
    text-align:center;
    display: inline-block;
    color:#FFF;
    background-color: #EB5221;
}

</style>

<template>
    <div>
        <img :src="good.img" alt="" class="banner-img">
        <p class="title">{{good.name}}</p>
        <p class="info">
            <span class="price">￥{{good.price}}</span><span class="cart"><a href="javascript:;" class="cart" @click="addAgood(good)">加入购物车</a></span>
        </p>
    </div>
</template>
<script>
import data from '../data.js'
export default {
    data(){
        return {
            good:{
                type:'',
                id:'',
                img:'',
                name:'',
                price:''
            }
        }
    },
    methods:{
        addAgood(item){
            this.$store.commit('addCart',item)
        }
    },
    mounted(){
        let goodId=this.$route.params.id;
        Object.assign(this.good,data.getGoodInfo(goodId));
    }
}
</script>

